<template>
  <div class="leftTwoDiv">
    <div class="leftTwoDivtop">
      <p>发电成本</p>
    </div>
    <div class="leftTwoDivcen">
      <div class="leftTwoDivcentop">
        <p>项目一</p>
        <p>项目二</p>
        <p>项目三</p>
      </div>
      <div class="leftTwoDivcenfoot">
        <p>1345</p>
        <p>1345</p>
        <p>1345</p>
      </div>
    </div>
    <div id="leftTwoDivfoot" style="width: 100%; height: 350px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.inits();
  },
  methods: {
    inits() {
      var chartDom = document.getElementById("leftTwoDivfoot");
      var myChart = echarts.init(chartDom);
      var option;

      var series = [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          stack: "a",
          name: "a",
        },
        {
          data: [10, 46, 64, "5", 9, 110, 10],
          type: "bar",
          stack: "a",
          name: "b",
        },
        {
          data: [30, "10", 0, 20, 10, "8", 5],
          type: "bar",
          stack: "a",
          name: "c",
        },
      ];
      const stackInfo = {};
      for (let i = 0; i < series[0].data.length; ++i) {
        for (let j = 0; j < series.length; ++j) {
          const stackName = series[j].stack;
          if (!stackName) {
            continue;
          }
          if (!stackInfo[stackName]) {
            stackInfo[stackName] = {
              stackStart: [],
              stackEnd: [],
            };
          }
          const info = stackInfo[stackName];
          const data = series[j].data[i];
          if (data && data !== "-") {
            if (info.stackStart[i] == null) {
              info.stackStart[i] = j;
            }
            info.stackEnd[i] = j;
          }
        }
      }
      for (let i = 0; i < series.length; ++i) {
        const data = series[i].data;
        const info = stackInfo[series[i].stack];
        for (let j = 0; j < series[i].data.length; ++j) {
          // const isStart = info.stackStart[j] === i;
          const isEnd = info.stackEnd[j] === i;
          const topBorder = isEnd ? 20 : 0;
          const bottomBorder = 0;
          data[j] = {
            value: data[j],
            itemStyle: {
              borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder],
            },
          };
        }
      }
      option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: series,
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.leftTwoDiv {
  width: 100%;
  height: 100%;
  .leftTwoDivtop {
    width: 100%;
    height: 50px;
    color: #58f7fd;
    font-size: 28px;
    font-weight: 400;
    padding-top: 1px;
    margin-left: 60px;
  }
  .leftTwoDivcen {
    width: 100%;
    height: 55px;
    .leftTwoDivcentop {
      height: 30px;
      display: flex;
      justify-content: space-evenly;
      p {
        color: #ffffff;
        font-size: 14px;
      }
    }
    .leftTwoDivcenfoot {
      height: 30px;
      display: flex;
      justify-content: space-evenly;
      p {
        color: #ffffff;
        font-size: 28px;
      }
    }
  }
}
</style>